import React, { useRef, useState, useEffect } from "react";
import { Tabs, Swiper, SearchBar } from "antd-mobile";
import TabSwiper from "../../components/TabSwiper/TabSwiper";
import { indexTan } from "../../apis/api";
import "./home.less";
const tabItems = [
  { key: "fruits", title: "水果" },
  { key: "vegetables", title: "蔬菜" },
  { key: "animals", title: "动物" },
];
function Swipers() {
  useEffect(() => {
    // indexTan()
  });
  const swiperRef = useState(null);
  const [activeIndex, setActiveIndex] = useState(0);
  return (
    <div className="Swipers">
      <div className="Swipers-title">
        <div className="tablist">
          <Tabs
            activeKey={tabItems[activeIndex].key}
            onChange={(key) => {
              const index = tabItems.findIndex((item) => item.key === key);
              setActiveIndex(index);
              swiperRef.current?.swipeTo(index);
            }}
          >
            {tabItems.map((item) => (
              <Tabs.Tab title={item.title} key={item.key} />
            ))}
          </Tabs>
        </div>
        <div className="search">
          <SearchBar placeholder="请输入搜索内容" />
        </div>
      </div>
      <div className="Swipers-content">
        <Swiper
          direction="horizontal"
          loop
          indicator={() => null}
          ref={swiperRef}
          defaultIndex={activeIndex}
          onIndexChange={(index) => {
            setActiveIndex(index);
          }}
        >
          <Swiper.Item>
            <div>菠萝</div>
          </Swiper.Item>
          <Swiper.Item>
            <div>西红柿</div>
          </Swiper.Item>
          <Swiper.Item>
            <div>蚂蚁</div>
          </Swiper.Item>
        </Swiper>
      </div>
    </div>
  );
}
export default function Home() {
  return (
    <div className="home">
      <Swipers></Swipers>
    </div>
  );
}
